<template>
  <view class="FAQsBox">
    <view class="otherList">
      <view class="otherListtitle otherListComment">
        <view class="commentL">
          <view class="titleIcon">
            <uni-icon type="help" color="#dc5c05" size="24"/>
          </view>
          <text class='text'>问机构</text>
        </view>
        <view class="commentR">
          <view class="titleIcon">
            <uni-icon type="compose" color="#dc5c05" size="20"/>
          </view>
        </view>
      </view>
      <comment :commentList='commentList'/>
    </view>
  </view>
</template>

<script>
    import comment from './comment'
  import uniIcon from '@/components/uni-icon/uni-icon.vue'

  export default {
    components: {comment, uniIcon},

    data() {
      return {
        commentList:[
            {
              nickName:'xxx网友',
              time:'08/10 08:12',
              content:'很酷的HBuilderX和uni-app，开发一次既能生成小程序，又能生成App',
              question:[{}]
            },
            {
              nickName:'xxx网友',
              time:'08/10 08:12',
              content:'很酷的HBuilderX和uni-app，开发一次既能生成小程序，又能生成App',
              question:[]
            },
          ]
      }
    },
  }
</script>

<style scoped lang=scss>
  .FAQsBox {
    .otherList {
      position: relative;
      font-size: 28upx;

      .otherListtitle {
        display: flex;
        align-items: center;
        height: 80upx;
        border-bottom: 1upx solid #e5e5e5;
        border-top: 1upx solid #e5e5e5;
        background-color: #F0F2EF;
      }

      .otherListComment {
        display: flex;
        justify-content: space-between;

        .commentL, .commentR {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #dc5c05;

          .titleIcon {
            margin: 0 26upx;
          }
        }

        .commentR {
          .text {
            font-size: 28upx;
            color: #8f8f94;
          }

          .titleIcon {
            width: auto;
            height: auto;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 26upx;
          }
        }
      }

      .contentText {
        padding: 30upx;
        font-size: 28upx;
        color: #8f8f94;
        line-height: 44upx;
        position: relative;

        &.contentTextShow {
          height: auto;

        }

        &.contentTextFlow {
          height: 200upx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
        }
      }

      .seeMore {
        color: #0AAFFF;
        position: absolute;
        bottom: 10upx;
        right: 40upx;
        display: flex;
        align-items: center;

        .icon {
          width: 0;
          height: 0;
          border: 10upx solid transparent;
          border-top-color: #0AAFFF;
          margin: 10upx 0 0 10upx;
        }

        .activeicon {
          border-top-color: transparent;
          border-bottom-color: #0AAFFF;
          margin: -upx 0 0 10upx;
        }
      }


    }
  }
</style>
